<template>
  <view class="content">
    <tui-navigation-bar splitLine @init="initNavigation" title="分项验收">
        <view class="tui-header-icon" :style="{ marginTop: top + 'px' }" style="display: flex;justify-content: space-between;">
          <tui-icon name="arrowleft" color='#000' @click="back"></tui-icon>
          <tui-icon v-if='approval===false' name="plus" color='#000' @click="newBranch"></tui-icon>
        </view>
    </tui-navigation-bar>
    <!-- 导航栏占位符，防止内容塌陷 -->
    <view :style="{ height: navBarHeight+'px' }"></view>
    <tui-searchbar radius='40rpx' placeholder="请输入分项验收编号、分项工程名称" @search="search" @clear="clear"></tui-searchbar>
    <tui-tab :tabs="tabs" @change="change" :current='currentTabIndex'></tui-tab>
    <scroll-view scroll-y="true" class="scroll">
      <ul v-for="(item,index) in tabList" :key='index' class="card" @click="checkOrRatify(item.id,item.flowStatus,item.comment)">
        <li class='lis'><text class='title'>【验收编号】</text><text class="titleText">{{item.branchCode}}</text></li>
        <li class='lis'><text class='title'>【单位工程】</text><text class="titleText">{{item.unitProjectName}}</text></li>
        <li class='lis'><text class='title'>【分部工程】</text><text class="titleText">{{item.subsectionName}}</text></li>
        <li class='lis'><text class='title'>【分项工程】</text><text class="titleText">{{item.branchName}}</text></li>
        <li class='lis'><text class='title'>【分项工程数】</text><text class="titleText">{{item.branchQuantity}}</text></li>
        <li class='lis'><text class='title'>【验收日期】</text><text class="titleText">{{item.checkStartDate}} 至 {{item.checkEndDate}}</text></li>
        <view :class="['state', getStateClass(item.flowStatus)]">{{item.flowStatus}}</view>
      </ul>
    </scroll-view>
  </view>
</template>

<script setup lang='ts'>
  import {ref} from 'vue';
  import {getProjectBranchList,getTask} from '@/apis/branch.js';
  import {onShow} from '@dcloudio/uni-app'
  const projectId = uni.getStorageSync("projectInfo").id
  const top = ref(0)
  const navBarHeight =uni.getStorageSync('systemInfo').statusBarHeight+46
  //是否拥有审批权限
  const approval = uni.getStorageSync('userRoleInProject').perms['mobile:branch:approval']
  const tabs = ref(!approval ? ['审批中', '审批通过', '审批不通过'] : ['待处理', '已处理'])
  const tabList = ref([])
  const list = ref([])
  // 当前的标签索引
  const currentTabIndex = ref(0);
  //更改标签内容
  const change = (e) => {
    currentTabIndex.value = e.index;
    //审批
    if (approval) {
      if (e.index === 0) {
        tabList.value.splice(0, tabList.value.length)
        tabList.value.push(...list.value.todo);
      } else {
        tabList.value.splice(0, tabList.value.length)
        tabList.value.push(...list.value.done);
      }
    } else {
      //施工
      if (e.index === 0) {
        tabList.value.splice(0, tabList.value.length)
        list.value.forEach(item => {
          if (item.flowStatus === '审批中') {
            tabList.value.push(item);
          }
        });
      } else if (e.index === 1) {
        tabList.value.splice(0, tabList.value.length)
        list.value.forEach(item => {
          if (item.flowStatus === '审批通过') {
            tabList.value.push(item);
          }
        });
      } else {
        tabList.value.splice(0, tabList.value.length)
        list.value.forEach(item => {
          if (item.flowStatus === '审批不通过') {
            tabList.value.push(item);
          }
        });
      }
    }
  }
  
  const initNavigation = (e) => {
    top.value = e.top;
  }
  
  onShow(() => {
    tabList.value = []
    // currentTabIndex.value=0
    if (approval) {
      getTask(projectId).then(res => {
        list.value = res.data.data
        if(currentTabIndex.value===0){
          tabList.value.push(...list.value.todo) 
        }else{
          tabList.value.push(...list.value.done) 
        }
      })
    } else {
      console.log(currentTabIndex.value);
      getProjectBranchList(projectId,1,-1).then(res => {
        list.value = res.data.data
        if(currentTabIndex.value===0){
          tabList.value.push(...list.value.filter(e=>e.flowStatus === '审批中')) 
        }else if(currentTabIndex.value===1){
          tabList.value.push(...list.value.filter(e=>e.flowStatus === '审批通过')) 
        }else{
          tabList.value.push(...list.value.filter(e=>e.flowStatus === '审批不通过')) 
        }
      })
    }

  })

  const search = ({
    value
  }) => {
    tabList.value = tabList.value.filter(item =>
      item.branchCode.includes(value) ||
      item.branchName.includes(value)
    )
  }

  const clear = () => {
    if (approval) {
      if (currentTabIndex.value === 0) {
        tabList.value = [...list.value.todo];
      } else {
        tabList.value = [...list.value.done];
      }
    } else {
      if (currentTabIndex.value === 0) {
        tabList.value = list.value.filter(item => item.flowStatus === '审批中');
      } else if (currentTabIndex.value === 1) {
        tabList.value = list.value.filter(item => item.flowStatus === '审批通过');
      } else {
        tabList.value = list.value.filter(item => item.flowStatus === '审批不通过');
      }
    }
  }

  //审批或者查看检验批
  const checkOrRatify = (id, flowStatus, comment) => {
    console.log(id, flowStatus, comment);
    uni.navigateTo({
      url: `/pages/branch/checkBranchMsg?id=${id}&flowStatus=${flowStatus}&approval=${approval}&comment=${comment}`
    })
  }

  //新增检验批
  const newBranch = () => {
    if (approval) return
    uni.navigateTo({
      url: '/pages/branch/newBranch'
    })
  }
  
  const back=()=>{
    uni.navigateBack()
  }

  //动态绑定样式
  const getStateClass = (state) => {
    switch (state) {
      case '审批不通过':
        return 'state-fail';
      case '审批通过':
        return 'state-pass';
      case '审批中':
        return 'state-progress';
      default:
        return '';
    }
  };
</script>

<style lang="scss" scoped>
  .content {
    background-color: #fafafa;
    .tui-header-icon {
      width: 100%;
      position: fixed;
      top: 0;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
      height: 32px;
      transform: translateZ(0);
      z-index: 99999;
      box-sizing: border-box;
    }
    .tui-header-icon-right {
      width: 100%;
      position: fixed;
      top: 0;
      right: 0;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
      height: 32px;
      transform: translateZ(0);
      z-index: 99999;
      box-sizing: border-box;
    }
    .scroll {
      background-color: #fafafa;
      box-sizing: border-box;
      .card {
        width: 95%;
        box-sizing: border-box;
        margin: 20rpx auto;
        padding: 15rpx;
        position: relative;
        border-radius: 20rpx;
        background-color: #ffffff;
        flex-direction: column;

        .lis {
          display: flex;
          flex: 1;
          align-items: center;
          margin: 10rpx 0;
          font-size: 14px;
          color: #7f7f7f;
          .title{
            margin-right: 20rpx;
          }
          .titleText{
          }
        }

        .state {
          position: absolute;
          padding: 0 20rpx;
          text-align: center;
          line-height: 30px;
          border: 1px solid #ff6937;
          right: 10px;
          top: 10px;
          color: #ff6937;

          &.state-fail {
            color: #ff4d4f;
            border-color: #ff4d4f;
          }

          &.state-pass {
            color: #3086ff;
            border-color: #3086ff;
          }

          &.state-progress {
            color: #faad14;
            border-color: #faad14;
          }

          &.state-pending {
            color: #d9d9d9;
            border-color: #d9d9d9;
          }
        }
      }
    }
  }
</style>